<!-- login.vue 完整实现 -->
<template>
	
	<view class="container">、
		<!-- 新增返回按钮 -->
		  <view class="back-btn" @click="navBack">
			<text class="back-text">← 返回</text>
		  </view>
		
		<view class="wrapper">
			<button 
			  class="auth-btn" 
			  @click="triggerAuth"
			  :disabled="isLoading"
			>
			  <image class="wechat-icon" src="/static/wechat-icon.png"/>
			  微信授权登录
			</button>
			  <button
			      class="confirm-btn" 
				  @click="navTo('/pages/public/userLogin')"
			    >
			      账号登录
			    </button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		wechatLogin
	} from '@/config/api/login';

	export default {
		data() {
			return {
				isLoading: false  // 控制按钮状态
			};
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url: `${url}`
				})
			},
			navBack(){
				uni.navigateBack();
			},
			async triggerAuth() {
			  if (this.isLoading) return;
			  this.isLoading = true;
		
			  try {
				// 第一步：获取用户授权
				const userInfo = await this.getWechatAuth();
				if (!userInfo) return;
		
				// 第二步：获取登录凭证
				const { code } = await this.getWxLoginCode();
				
				// 第三步：执行登录
				await this.handleLogin(code, userInfo);
				
			  } catch (error) {
				this.handleError(error);
			  } finally {
				this.isLoading = false;
			  }
			},
		
			getWechatAuth() {
			  return new Promise(resolve => {
				wx.getUserProfile({
				  desc: '获得你的公开信息（昵称、头像）', // 保持与截图一致
				  lang: 'zh_CN',
				  success: (res) => {
					// 用户点击允许
					console.log("微信用户信息",res.userInfo)
					resolve(res.userInfo);
				  },
				  fail: () => {
					// 用户点击取消
					uni.showToast({ title: '已取消授权', icon: 'none' });
					resolve(null);
				  }
				});
			  });
			},
		
			getWxLoginCode() {
			  return new Promise((resolve, reject) => {
				wx.login({
				  success: (res) => {
					if (res.code) resolve(res);
					else reject(new Error('获取 code 失败'));
				  },
				  fail: reject
				});
			  });
			},
		
			async handleLogin(code, userInfo) {
			  try {
				const res = await wechatLogin({
				  code,
				  nickname: userInfo.nickName,
				  avatarUrl: userInfo.avatarUrl
				});
		
				if (res.statusCode === 200) {
				  uni.setStorageSync('token', res.data.token);
				  //存储用户信息
				  console.log(res.data.userInfo);
				  this.login(res.data.userInfo);
				  uni.navigateBack({
				    delta: 1,
				    success: () => {
				      const page = getCurrentPages().pop();
				      if (page) page.onLoad();
				    }
				  });
				} else {
				  throw new Error(res.data.msg || '登录失败');
				}
			  } catch (error) {
				throw new Error('登录处理失败');
			  }
			},
			
			...mapMutations(['login']),
			
			handleError(error) {
			  console.error('登录流程异常:', error);
			  uni.showToast({
				title: error.message || '登录失败，请重试',
				icon: 'none'
			  });
			}
			
		}
	};
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
	}
	
	.auth-btn {
	  width: 80%;
	  height: 100rpx;
	  background: #07c160;
	  border-radius: 50rpx;
	  color: #fff;
	  font-size: 32rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  margin: 40rpx auto;
	
	  &::after {
	    border: none;
	  }
	
	  &:active {
	    opacity: 0.9;
	  }
	}
	
	.wechat-icon {
	  width: 48rpx;
	  height: 48rpx;
	  margin-right: 20rpx;
	}

	.back-btn {
	    position: absolute;
	    left: 20upx;
	    top: 20upx;
	    z-index: 1000;
	    padding: 15upx 30upx;
	    background: #f8f8f8;
	    border-radius: 40upx;
	    .back-text {
	      font-size: 34upx;
	      color: #333;
	    }
	  }

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		left: 50upx;
		top: -90upx;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60upx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}

	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}
	}

	.forget-section {
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}

	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>